<template>
	<view class="box-c ">
		<view class="calendar">
			<ss-calendar :checks="checks" :choose="choose" @current-month-day="onSignIn" @prev-month-day="onPrev"
				@next-month-day="onNext" />
		</view>
		<view class="schedule" :style="{minHeight:listHeigth+'px'}">
			<view class="schedule-1 animated fadeIn" v-show="isShowSchedule">

				<view class="box d-jc-c" v-for="(classInfo,index) in classInfoList">
					<view class="plan box-c d-ai-c">
						<view :class="classInfo.isLine ==1? 'active-circle':''"></view>
						<view :class="classInfo.isLine ==1? 'active-line':''"></view>
					</view>
					<view class="time box d-jc-sb d-ai-c px-2">
						<view class="box-c d-jc-c time-title">
							<text>{{classInfo.title}}</text>
							<text>签到时间：{{classInfo.startTime}}</text>
							<text>签退时间：{{classInfo.endTime}}</text>
						</view>
						<view class="">
							<view class="sign box d-ai-c d-jc-c" :class="classInfo.isSign != -1? 'active-sign':''">
								<text @tap='openSign(classInfo)'>
									去打卡
								</text>
							</view>

						</view>

					</view>
				</view>
				<view class="box d-jc-sa end-line d-ai-c" v-show="classInfoList.length>0">
					<text></text>
					<text>已经到底了</text>
					<text></text>
				</view>
				<view class="box d-jc-sa no-schedule d-ai-c" v-show="classInfoList.length<1">
					今天还没有课程~
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import ssCalendar from '@/components/ss-calendar/ss-calendar.vue'
	export default {
		components: {
			ssCalendar
		},
		data() {
			return {
				checks: [],
				choose: '',
				signFlag: false,
				newDate: '',
				MonthDate: '',
				classInfoList: '',
				isShowSchedule: true,
				listHeigth:0


			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.listHeigth = res.windowHeight - uni.upx2px(750) //windoHeight为窗口高度，主要使用的是这个
					console.log(that.listHeigth)
				}
			})

		},
		components: {
			ssCalendar
		},
		onLoad() {
			this.initDate()
			this.getScheduleByDate(this.newDate)
			this.getScheduleByMonth(this.newDate)
		},
		methods: {
			openSign(classInfo) {
				if (classInfo.isSign == -1) {
					uni.showToast({
						title: '不在打卡时间范围内',
						duration: 1000,
						icon: "none"
					});
				} else {
					uni.navigateTo({
						url: '../shopList/product-activity-info?id=' + classInfo.id
					})
				}


			},
			initDate() {
				//当前时间
				this.newDate = new Date().format("yyyy-MM-dd hh:mm:ss");
				this.MonthDate = new Date().format("yyyy-MM-dd hh:mm:ss");
			},
			//获取日历信息(红点)
			getScheduleByMonth(MonthDate) {
				this.$api.getScheduleByMonth({
					date: MonthDate
				}).then((res) => {
					this.checks = res.data.dataMap
					console.log(res.data.dataMap)

				})
			},
			//获取日程
			getScheduleByDate(date) {
				this.$api.getScheduleByDate({
					date: date
				}).then((res) => {
					this.classInfoList = res.data.dataMap
					this.isShowSchedule = true
					if (this.classInfoList.isSign == -1) {
						this.signFlag = false
					} else {
						this.signFlag = true
					}
					console.log(JSON.stringify(res))

				})
			},
			onSignIn(payload,date) {
				this.isShowSchedule = false //用于动画

				const {
					checked,
					year,
					month,
					day
				} = payload
				if(date==undefined){
					date = `${year}-${month}-${day}`
				}
				// console.log('时间：'+date)
				this.choose = date
				this.getScheduleByDate(date);

			},
			onPrev(payload) {
				let date = payload.year + '-' + payload.month + '-' + '01'
				let date2 = payload.year + '-' + payload.month + '-' + '1'
				this.choose=date2
				console.log(date)
				this.getScheduleByMonth(date)
				this.getScheduleByDate(date)
			},
			onNext(payload) {
				let date = payload.year + '-' + payload.month + '-' + '01'
				let date2 = payload.year + '-' + payload.month + '-' + '1'
				console.log(date)
				const {
					checked,
					year,
					month,
					day
				} = payload
				this.choose=date2
				// this.onSignIn(payload,date)
				this.getScheduleByMonth(date)
				this.getScheduleByDate(date)
			}

		}
	}
</script>

<style>
	.no-schedule {
		color: #b6b6b6;
	}

	.end-line text:nth-child(1) {
		width: 300rpx;
		height: 1rpx;
		background-color: #d8d8d8;
		margin: 25rpx 0;
	}

	.end-line text:nth-child(2) {
		color: #939393;
		margin: 25rpx 0;
		font-size: 24rpx;
	}

	.end-line text:nth-child(3) {
		width: 300rpx;
		height: 2rpx;
		background-color: #d8d8d8;
		margin: 25rpx 0;
	}

	.active-sign {
		background-color: #FF5551 !important;
	}

	.active-circle {
		border: solid 6rpx #FF5551 !important;
	}

	.active-line {
		background-color: #FF5551 !important;
	}

	.time-title text:nth-child(1) {
		color: #FF5551;
		font-size: 32rpx;
		font-weight: 600;
	}

	.time-title text {
		color: #666;
		font-size: 28rpx;
	}

	.sign {
		border-radius: 12rpx;
		background-color: #ccc;
		width: 150rpx;
		color: #fff;
		height: 68rpx;
	}

	.schedule-1 {
		margin-top: 20rpx;
	}

	.schedule {
		background-color: #ebebeb;
		min-height: 490rpx;
	}

	.time {
		width: 600rpx;
		height: 200rpx;
		background-color: #ffffff;
		border-radius: 15rpx;

	}

	.plan {
		padding: 0 20rpx 0 0;
	}

	.plan view:first-child {
		width: 18rpx;
		height: 18rpx;
		border: solid 6rpx #d0d0d0;
		border-radius: 50rpx;
	}

	.plan view:last-child {
		width: 4rpx;
		height: 190rpx;
		background-color: #d0d0d0;
	}

</style>
